<template>
  <div class="sliderContent">
    <!-- 滑块 -->
    <vue-slider
      v-model="value"
      :marks="marks"
      :max="max"
      :included="true"
      @change="dragEnd"
      :dotSize="20"
    >
      <!-- :data="data" -->
      <template v-slot:step="{ label, active }">
        <div :class="[{ 'custom-step': label && label % 200 == 0 }, { active }]"
        ></div>
      </template>
    </vue-slider>

    <!-- 价格区间 -->
    <div class="price-interval">
      <div
        class="in-padding"
        v-for="(interval, index) in priceIntervalData" :key="index" @click="onIntervalItem(interval)">
        <div class="interval-item" :class="{ active: interval.active }">
          <span>{{ interval.text }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import VueSlider from "vue-slider-component"
import "vue-slider-component/theme/default.css"

export default {
  name: "",
  components: {
    VueSlider
  },
  props: {},
  data() {
    return {
      // 滑块属性
      // data:[0,50,100,150, 200, 400, 600, 800, 1000],
      max: 1000,
      value: [100, 150],
      marks: {
        0: 0,
        50: "",
        100: "",
        150: "",
        200: 200,
        250: "",
        300: "",
        350: "",
        400: 400,
        450: "",
        500: "",
        550: "",
        600: 600,
        650: "",
        700: "",
        750: "",
        800: 800,
        850: "",
        900: "",
        950: "",
        1000: 1000
      },
      // 更改滑块状态属性
      priceIntervalData: [
        { min: 0, max: 200, text: `￥${200}以下`, active: false },
        { min: 201, max: 300, text: `￥${201}-${300}`, active: false },
        { min: 301, max: 400, text: `￥${301}-${400}`, active: false },
        { min: 401, max: 600, text: `￥${401}-${600}`, active: false },
        { min: 601, max: 800, text: `￥${601}-${800}`, active: false },
        { min: 801, max: 1000, text: `￥${801}-${1000}以上`, active: false }
      ]
    };
  },
  watch: {},
  computed: {},
  methods: {
    // 滑块事件
    changeVal() {
      this.value = [0, 300];
    },
    dragEnd(val) {
      console.log(val);
    },

    //按钮事件
    onIntervalItem(val) {
      this.value = [val.min,val.max]
      console.log(val, 86);
    }
  },
  created() {},
  mounted() {}
};
</script>

<style lang="scss">
// 外层容器
.sliderContent {
  // 滑块active样式
  .custom-step {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #ccc;
    background-color: #fff;
    &.active {
      box-shadow: 0 0 0 3px #3498db;
      background-color: #3498db;
    }
  }
  // 更改价格区间
  .price-interval {
    padding-left: 12px;
    margin-top: 30px;
    .in-padding {
      width: 25%;
      display: inline-block;
      margin-bottom: 12px;
      padding-right: 12px;
      box-sizing: border-box;
      .interval-item {
        text-align: center;
        border-radius: 4px;
        line-height: 35px;
        background: #f2f2f2;
        color: #333;
        font-size: 12px;
        border: 1px #f2f2f2 solid;
        white-space: nowrap;
        span {
          transform: scale(0.9);
          display: block;
        }
        &.active {
          border: 1px #009adf solid;
          color: #009adf;
          background: #fff;
        }
        &:nth-child(4n) {
          margin-right: 0;
        }
      }
    }
  }
}
</style>
